<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能灯光控制系统</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      color: #333;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }

    header {
      background: linear-gradient(90deg, #3494e6, #ec6ead);
      color: white;
      padding: 25px;
      text-align: center;
      position: relative;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      margin-bottom: 10px;
    }

    .header-controls {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }

    .main-switch {
      position: relative;
      display: inline-block;
      width: 70px;
      height: 32px;
    }

    .main-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider-round {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #2ecc71;
      transition: .4s;
      border-radius: 34px;
    }

    .slider-round:before {
      position: absolute;
      content: "";
      height: 24px;
      width: 24px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked+.slider-round {
      background-color: #e74c3c;
    }

    input:checked+.slider-round:before {
      transform: translateX(38px);
    }

    .controls-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 25px;
      padding: 35px;
    }

    .control-card {
      background: white;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      padding: 25px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .control-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
    }

    .control-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
    }

    .zone-1::after {
      background: linear-gradient(90deg, #3494e6, #5dade2);
    }

    .zone-2::after {
      background: linear-gradient(90deg, #ec6ead, #f39060);
    }

    .zone-3::after {
      background: linear-gradient(90deg, #2ecc71, #1abc9c);
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 18px;
      border-bottom: 1px solid #eee;
    }

    .card-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 18px;
      font-size: 1.8rem;
      color: white;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .zone-1 .card-icon {
      background: linear-gradient(45deg, #3494e6, #5dade2);
    }

    .zone-2 .card-icon {
      background: linear-gradient(45deg, #ec6ead, #f39060);
    }

    .zone-3 .card-icon {
      background: linear-gradient(45deg, #2ecc71, #1abc9c);
    }

    .card-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: #2c3e50;
    }

    .control-section {
      margin-bottom: 25px;
    }

    .section-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: #34495e;
      display: flex;
      align-items: center;
    }

    .section-title i {
      margin-right: 10px;
      font-size: 1.3rem;
    }

    .color-temp-controls {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .color-temp-btn {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 12px;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    .color-temp-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .color-temp-btn.active {
      background: linear-gradient(45deg, #3494e6, #5dade2);
      color: white;
      box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    }

    .color-temp-btn i {
      font-size: 1.8rem;
      margin-bottom: 8px;
    }

    .white-btn.active {
      background: linear-gradient(45deg, #c9d6ff, #e2e2e2);
      color: #333;
    }

    .neutral-btn.active {
      background: linear-gradient(45deg, #ffd194, #f5f5f5);
      color: #333;
    }

    .blue-btn.active {
      background: linear-gradient(45deg, #3494e6, #5dade2);
      color: white;
    }

    .slider-control {
      display: flex;
      align-items: center;
      margin-top: 15px;
      gap: 15px;
    }

    .slider-container {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #ddd;
      outline: none;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .white-slider::-webkit-slider-thumb {
      background: #c9d6ff;
      border: 2px solid #a1b6ff;
    }

    .neutral-slider::-webkit-slider-thumb {
      background: #ffd194;
      border: 2px solid #ffb347;
    }

    .blue-slider::-webkit-slider-thumb {
      background: #3494e6;
      border: 2px solid #2471c8;
    }

    .value-display {
      min-width: 45px;
      text-align: center;
      font-weight: bold;
      font-size: 1.1rem;
      color: #2c3e50;
    }

    .power-controls {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }

    .power-btn {
      padding: 12px 25px;
      border: none;
      border-radius: 10px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .power-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .power-btn i {
      margin-right: 8px;
    }

    .off-btn {
      background: linear-gradient(45deg, #e74c3c, #c0392b);
    }

    .on-btn {
      background: linear-gradient(45deg, #2ecc71, #27ae60);
    }

    .brightness-control {
      background: linear-gradient(45deg, #3494e6, #5dade2);
    }

    footer {
      text-align: center;
      padding: 25px;
      background: #f8f9fa;
      color: #6c757d;
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      .controls-container {
        grid-template-columns: 1fr;
        padding: 20px;
      }

      .color-temp-controls {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <header>
        <h1>智能灯光控制系统</h1>
        <div class="subtitle">多区域灯光调节与色温控制</div>
        <div class="header-controls">
          <label class="main-switch">
            <input type="checkbox" v-model="mainPower">
            <span class="slider-round"></span>
          </label>
        </div>
      </header>

      <div class="controls-container">
        <div class="control-card zone-1" v-for="(zone, index) in zones" :key="'zone-'+index">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-lightbulb"></i>
            </div>
            <div class="card-title">{{ zone.name }}</div>
          </div>

          <div class="control-section">
            <div class="section-title">
              <i class="fas fa-palette"></i> 调色温
            </div>
            <div class="color-temp-controls">
              <button v-for="(color, colorIndex) in zone.colors" :key="'color-'+colorIndex" class="color-temp-btn"
                :class="[color.class, {active: color.active}]" @click="selectColor(zone, color)">
                <i :class="color.icon"></i>
                <span>{{ color.name }}</span>
              </button>
            </div>
          </div>

          <div class="control-section">
            <div class="section-title">
              <i class="fas fa-sun"></i> 调光
            </div>
            <div class="slider-control">
              <span class="value-display">{{ zone.brightness }}%</span>
              <div class="slider-container">
                <input type="range" min="0" max="100" v-model="zone.brightness" class="slider"
                  :class="getActiveColor(zone).sliderClass">
              </div>
            </div>

            <div class="power-controls">
              <button class="power-btn off-btn" @click="zone.power = false">
                <i class="fas fa-power-off"></i> 关闭
              </button>
              <button class="power-btn on-btn" @click="zone.power = true">
                <i class="fas fa-power-off"></i> 开启
              </button>
              <button class="power-btn brightness-control" @click="adjustBrightness(zone)">
                <i class="fas fa-adjust"></i> 调亮
              </button>
            </div>
          </div>
        </div>
      </div>

      <footer>
        <p>智能家居系统 © 2023 | 灯光控制面板 v2.1</p>
      </footer>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        mainPower: true,
        zones: [
          {
            name: '1号区域',
            power: true,
            brightness: 75,
            colors: [
              { name: '白色光', class: 'white-btn', sliderClass: 'white-slider', icon: 'fas fa-sun', active: true },
              { name: '中性光', class: 'neutral-btn', sliderClass: 'neutral-slider', icon: 'fas fa-cloud-sun', active: false },
              { name: '暖色光', class: 'blue-btn', sliderClass: 'blue-slider', icon: 'fas fa-fire', active: false }
            ]
          },
          {
            name: '2号区域',
            power: true,
            brightness: 60,
            colors: [
              { name: '白色光', class: 'white-btn', sliderClass: 'white-slider', icon: 'fas fa-sun', active: false },
              { name: '中性光', class: 'neutral-btn', sliderClass: 'neutral-slider', icon: 'fas fa-cloud-sun', active: true },
              { name: '暖色光', class: 'blue-btn', sliderClass: 'blue-slider', icon: 'fas fa-fire', active: false }
            ]
          },
          {
            name: '3号区域',
            power: false,
            brightness: 45,
            colors: [
              { name: '白色光', class: 'white-btn', sliderClass: 'white-slider', icon: 'fas fa-sun', active: false },
              { name: '中性光', class: 'neutral-btn', sliderClass: 'neutral-slider', icon: 'fas fa-cloud-sun', active: false },
              { name: '暖色光', class: 'blue-btn', sliderClass: 'blue-slider', icon: 'fas fa-fire', active: true }
            ]
          }
        ]
      },
      methods: {
        selectColor(zone, color) {
          zone.colors.forEach(c => {
            c.active = (c.name === color.name);
          });
        },
        getActiveColor(zone) {
          return zone.colors.find(color => color.active) || zone.colors[0];
        },
        adjustBrightness(zone) {
          zone.power = true;
          zone.brightness = Math.min(100, zone.brightness + 20);
        }
      },
      watch: {
        mainPower(newVal) {
          if (newVal) {
            this.zones.forEach(zone => {
              zone.power = true;
            });
          } else {
            this.zones.forEach(zone => {
              zone.power = false;
            });
          }
        }
      }
    });
  </script>
</body>

</html>